<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日历插件演示</title>
    <!-- 以下依赖引入顺序需要一致 -->
    <!-- 引入jQuery -->
    <script src="./lib/jquery-3.3.1.min.js"></script>
    <!-- 引入bootstrap框架 -->
    <link rel="stylesheet" href="./lib/bootstrap_3.3.0/css/bootstrap.min.css">
    <script src="./lib/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <!-- 引入bootstrap日历开发包 -->
    <link rel="stylesheet" href="./lib/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
    <script src="./lib/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
    <script src="./lib/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

    <script>
        // 官方说明文档：https://www.bootcss.com/p/bootstrap-datetimepicker/index.htm
        $(function() {
            $('#datePut').datetimepicker({
                language: 'zh-CN',          // 语言
                format: 'yyyy-mm-dd',       // 日期的格式
                minView: 'month',           // 可以选择的最小视图
                initialDate: new Date(),    // 初始化显示的日期
                autoclose: true,            // 选择完日期后，是否自动关闭
                todayBtn: true,              // 是否显示"今天"按钮
                clearBtn: true              // 是否显示"清空"按钮
            })
        })
    </script>
</head>
<body>
    <div>
        <label for="datePut">日期</label>
        &nbsp;&nbsp;&nbsp;
        <input type="text" id="datePut" readonly>
    
    </div>
</body>
</html>